<template>
  <div  class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="productUpdate"
          v-hasPermi="['super:team:add']"
        >修改申请流程</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['super:team:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['super:team:remove']"
        >删除</el-button>
      </el-col>
    </el-row>
    <el-card>
      <el-table v-loading="loading" :data="superTeamSupplier"  @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="合作品牌Id" align="center" prop="cooperativeId" />
        <!--        <el-table-column label="供应商名称" align="center" prop="supplierName" />-->
        <el-table-column label="企业图片" width="400" align="center" prop="cooperativeUrl" >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cooperativeUrl"
              @click="getBigCertificateUrl(scope.row)"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="是否展示轮播" align="center" width="400px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.cooperativeState"
                       active-value="0"
                       inactive-value="1"
                       @change="handleStatusChange(scope.row)"
                       active-text="启用"
                       inactive-text="禁用"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="400">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['super:team:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"  />
      <!--修改申请流程-->
      <el-dialog :title="productTitle" :visible.sync="openProduct" width="500px" append-to-body>
      <el-steps :active="active" finish-status="success">
        <el-step title="第一流程"></el-step>
        <el-step title="第二流程"></el-step>
        <el-step title="第三流程"></el-step>
      </el-steps>
        <el-form ref="productForm" :model="productForm" label-width="80px">
          <div class="info" v-if="active==0">
            <el-form-item label="流程内容" prop="textOne">
              <el-input v-model="productForm.textOne"></el-input>
            </el-form-item>
            <el-form-item label="流程标题" prop="textTwo">
              <el-input v-model="productForm.textTwo"></el-input>
            </el-form-item>
            <el-form-item label="流程简介" prop="textThere">
              <el-input v-model="productForm.textThere"></el-input>
            </el-form-item>
            <el-form-item label="流程时间" prop="oneTime">
              <el-input v-model="productForm.oneTime"></el-input>
            </el-form-item>
          </div>
          <div class="info" v-if="active==1">
            <el-form-item label="流程内容" prop="textFour">
              <el-input v-model="productForm.textFour"></el-input>
            </el-form-item>
            <el-form-item label="流程标题" prop="textFive">
              <el-input v-model="productForm.textFive"></el-input>
            </el-form-item>
            <el-form-item label="流程简介" prop="textSix">
              <el-input v-model="productForm.textSix"></el-input>
            </el-form-item>
            <el-form-item label="流程时间" prop="twoTime">
              <el-input v-model="productForm.twoTime"></el-input>
            </el-form-item>
          </div>
          <div class="info" v-if="active==2">
            <el-form-item label="流程内容" prop="textSeven">
              <el-input v-model="productForm.textSeven"></el-input>
            </el-form-item>
            <el-form-item label="流程标题" prop="textEight">
              <el-input v-model="productForm.textEight"></el-input>
            </el-form-item>
            <el-form-item label="流程简介" prop="textNine">
              <el-input v-model="productForm.textNine"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitProductForm">确 定</el-button>
            </el-form-item>
          </div>
          <el-button style="margin-top: 12px;" @click="next" v-if="active<2">下一步</el-button>
          <el-button style="margin-top: 12px;" @click="pre" v-if="active>=1">上一步</el-button>
        </el-form>
      </el-dialog>
      <!-- 添加合作伙伴 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="图片URL" prop="cooperativeUrl">
            <el-upload
              class="upload-demo"
              :http-request="upload"
              action="aaa"
              accept=".jpg,.png"
              :limit="1"
              :file-list="InfoImgList"
              :on-remove="handleRemoveInfoImage"
              :before-remove="beforeRemoveInfo"
              :on-error="handleError"
              ref="upload">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">仅支持jpg,png格式,以最新上传为准</div>
            </el-upload>

            <!--<el-input v-model="formPic.picUrl" placeholder="请输入图片URL" />-->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormPic">确 定</el-button>
          <el-button @click="cancelPic">取 消</el-button>
        </div>
      </el-dialog>

    </el-card>

  </div>
</template>

<script>
 import {
   findAllBrand,
   updateState,
   delCooperative,
   addCooperative,
   getProduct,
  updateProduct
 } from "@/api/super/superCooperativeBrand"
 import {uploadImage} from "@/api/shopping/product";
  export default {
    name: "index",
    data() {
      return {
        //点击次数
        active: 0,
        //添加修改图片
        InfoImgList:[],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 分类表格数据
        superTeamSupplier: null,
        // 弹出层标题
        title: "",
        //申请流程标题
        productTitle:"",
        //是否显示流程修改弹出层
        openProduct:false,
        // 表单参数
        form: {},
        //修改流程表单参数
        productForm:[{
          productId:null,
          textOne:null,
          textTwo:null,
          textThere:null,
          textFour:null,
          textFive:null,
          textSix:null,
          textSeven:null,
          textEight:null,
          textNine:null,
          oneTime:null,
          twoTime:null
        }],
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        // 状态数据字典
        statusOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        defaultProps: {
          children: "children",
          label: "label",
        },
        dialogCertificateUrlList:[],
      };
    },
    created() {
      this.getList();
      this.getProductList();
    },
    methods: {
      //下一步方法
      next() {
        if (this.active++ > 2) this.active = 0;
      },
      pre() {
        if (this.active-- < 2) this.active = 0;
      },
        /* 查询类别列表 **/
      getList(){
        this.loading = true;
        findAllBrand().then(response => {
          this.superTeamSupplier = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 提交按钮 */
      submitFormPic() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            addCooperative(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });

          }
        });

      },
      cancelPic(){
        this.open = false;
        this.reset();
      },
      //产品信息图片上传
      upload(param){
        let file = param.file;
        let fileType = file.type;
        let isLt2M = file.size / 1024 / 1024 < 500;
        if (!isLt2M) {
          this.$message.error("上传大小大小必须小于500M");
          this.fileList=[];
          return;
        }
        let form = new FormData();
        form.append("file", file);
        uploadImage(form).then((res)=>{
          if(res.code==200){
            this.form.cooperativeUrl = "http://51jhf.com/profile/xiazai/"+res.filePath;
          }
          // console.log(res);
        })
      },
      beforeRemoveInfo(file, InfoImgList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      //提交修改流程按钮
      submitProductForm(){
        this.$refs["productForm"].validate(valid => {
          if (valid) {
            console.log(this.productForm);
            updateProduct(this.productForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.openProduct = false;
              }
            });

          }
        });
      },
      //上传异常
      handleError(err, file, fileList){
        this.$message.error("上传失败");
      },
      //获取申请流程
      getProductList(){
        getProduct().then((res)=>{
          console.log(res.data);
          this.productForm = res.data;
        })
      },
      handleStatusChange(row){
        console.log(row)
        let text = row.cooperativeState === "0" ? "启用" : "停用";
        this.$confirm(
          '确认要' + text + '"' + row.cooperativeId + '"吗?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            console.log(row.cooperativeId+"       "+row.cooperativeState);

            return updateState(row.cooperativeId,row.cooperativeState);
          })
          .then(() => {
            this.msgSuccess(text + "成功");
          })
          .catch(function () {
            row.cooperativeState = row.cooperativeState === "0" ? "1" : "0";
          });
      },
      /*getTeamType(row){
        this.$router.push({path:"/superTeamSupplier/superTeam",query:{cooperativeId:row.cooperativeId}});
      },*/
      // 查看企业logo
      getBigCertificateUrl(row){
        this.dialogCertificateUrlList.push(row.cooperativeUrl);
      },
      //添加
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加合作品牌";
      },
      //修改
      productUpdate(){
        this.getProductList();
        this.openProduct = true;
        this.title = "修改申请流程"
      },
      // 表单重置
      reset() {
        this.form = {
          cooperativeId: null,
          cooperativeUrl: null,
          cooperativeState: null,
        };
        this.resetForm("form");
      },
      //取消
      cancel() {
        this.open = false;
        this.reset();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.cooperativeId)
        console.log(this.ids);
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const productIds = row.cooperativeId || this.ids;
        this.$confirm('是否确认删除id为"' + productIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delCooperative(productIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
      },
      //移除产品信息图片
      handleRemoveInfoImage(file, fileList){
        const picName = `${file.name}`;
        deleteDetailsImgByName(picName).then((res)=>{
          if(res.code == 200){
            this.formPic.picUrl = '';
            this.fileList=[];
          }

        });


      },
    }
  }
</script>

<style scoped>

</style>
